<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="20.02001953125"
    height="20.3057861328125"
    viewBox="0 0 20.02001953125 20.3057861328125"
    fill="none"
  >
    <path
      d="M0 8.77439C0 7.58439 0.704704 6.09099 1.62542 5.27139L1.78999 5.13399L6.79999 1.22359C8.24964 0.100386 10.5287 -1.38581e-05 12.0977 0.967186L12.2901 1.09359L18.05 5.12399C19.0921 5.85359 19.9277 7.38199 20.0128 8.68899L20.02 8.90459L20.02 15.6852C20.02 18.1648 18.0634 20.1904 15.6114 20.301L15.4 20.3058L4.62002 20.3058C2.14074 20.3058 0.115315 18.3396 0.0048048 15.8866L0 15.6752L0 8.77439ZM9.26 16.3058L9.26 13.3058C9.26 12.8958 9.60001 12.5558 10.01 12.5558C10.42 12.5558 10.76 12.8958 10.76 13.3058L10.76 16.3058C10.76 16.7158 10.42 17.0558 10.01 17.0558C9.60001 17.0558 9.26 16.7158 9.26 16.3058Z"
      fill-rule="evenodd"
      :style="style"
    ></path>
  </svg>
</template>

<script>
  import config from './config' // 导入配置文件
  const { transionDuration, activeColor, inactiveColor } = config

  export default {
    name: 'dashboard-svg',
    props: {
      active: {
        type: Boolean,
        default: false,
      },
      transiton: {
        type: Number,
        default: transionDuration,
      },

      activeColor: {
        type: String,
        default: activeColor,
      },
      inactiveColor: {
        type: String,
        default: inactiveColor,
      },
    },
    computed: {
      style() {
        return {
          fill: this.active ? this.activeColor : this.inactiveColor,
          transition: `fill ${this.transiton}s ease`,
        }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
